<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <style>
      .mark {
        position: absolute;
        height: 100px;
        width: 100px;
        left: 100px;
        top: 180px;
        border: 1px solid #000;
        cursor: move;
      }
    </style>
  </head>
  <body>
    <canvas id="c1"></canvas> //显示原图像
    <div class="mark" id="mark"></div>
    <canvas id="c3"></canvas> //显示剪切后的图像
    <script>
      var canvas1 = document.getElementById("c1");
      var oMark = document.getElementById("mark");
      var canvas3 = document.getElementById("c3");
      canvas1.height = 300;
      canvas1.width = 300;
      canvas3.height = 100;
      canvas3.width = 100;
      var cxt1 = canvas1.getContext("2d");

        var img = new Image();
        img.crossOrigin = "";
        // img.setAttribute("crossOrigin",'anonymous');
        // img.src = "./1.jpg";
        img.src = 'https://avatars3.githubusercontent.com/u/496048?s=120&v=4';

      var srcX = oMark.offsetLeft - canvas1.getBoundingClientRect().left;
      var srcY = oMark.offsetTop - canvas1.getBoundingClientRect().top;
      var sWidth = oMark.offsetWidth;
      var sHeight = oMark.offsetHeight;

      var canvas2 = document.createElement("canvas");
      var cxt2 = canvas2.getContext("2d");
        img.onload = function() {
          cxt1.drawImage(img, 0, 0, canvas1.width, canvas1.height);
          var dataImg = cxt1.getImageData(srcX, srcY, sWidth, sHeight);
          canvas2.width = sWidth;
          canvas2.height = sHeight;
          cxt2.putImageData(dataImg, 0, 0, 0, 0, canvas2.width, canvas2.height);
          var img2 = canvas2.toDataURL("image/png");

          var cxt3 = canvas3.getContext("2d");
          var img3 = new Image();
          img3.src = img2;
          img3.onload = function() {
            cxt3.drawImage(img3, 0, 0, canvas3.width, canvas3.height);
          };
        };

    //   var xhr = new XMLHttpRequest();
    //   xhr.onload = function() {
    //     var url = URL.createObjectURL(this.response);
    //     var img = new Image();
    //     img.onload = function() {
    //       // 此时你就可以使用canvas对img为所欲为了
    //       // ... code ...

    //       cxt1.drawImage(img, 0, 0, canvas1.width, canvas1.height);
    //       var dataImg = cxt1.getImageData(srcX, srcY, sWidth, sHeight);
    //       canvas2.width = sWidth;
    //       canvas2.height = sHeight;
    //       cxt2.putImageData(dataImg, 0, 0, 0, 0, canvas2.width, canvas2.height);
    //       var img2 = canvas2.toDataURL("image/png");

    //       var cxt3 = canvas3.getContext("2d");
    //       var img3 = new Image();
    //       img3.src = img2;
    //       img3.onload = function() {
    //         cxt3.drawImage(img3, 0, 0, canvas3.width, canvas3.height);
    //       };

    //       // 图片用完后记得释放内存
    //       URL.revokeObjectURL(url);
    //     };
    //     img.src = url;
    //   };
    //   xhr.open("GET", "https://mdn.mozillademos.org/files/5397/rhino.jpg", true);
    //   xhr.responseType = "blob";
    //   xhr.send();
    </script>
  </body>
  <br />
  <br />
  <br />
  <a href="https://www.jb51.net/html5/637098.html"
    >例：详解如何解决canvas图片getImageData,toDataURL跨域问题</a
  >
  <br />
  <a href="解决canvas图片getImageData,toDataURL跨域问题"
    >张鑫旭：详解如何解决canvas图片getImageData,toDataURL跨域问题</a
  >
</html>
